<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <title>DashboardKit Bootstrap 5 Admin Template</title>
    <!-- HTML5 Shim and Respond.js IE11 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 11]>


    <![endif]-->
    <!-- Meta -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimal-ui">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="description" content="DashboardKit is made using Bootstrap 5 design framework. Download the free admin template & use it for your project.">
    <meta name="keywords" content="DashboardKit, Dashboard Kit, Dashboard UI Kit, Bootstrap 5, Admin Template, Admin Dashboard, CRM, CMS, Free Bootstrap Admin Template">
    <meta name="author" content="DashboardKit ">


    <!-- Favicon icon -->


    <!-- font css -->
    <link rel="stylesheet" th:href="@{/css/feather.css}">
    <link rel="stylesheet" th:href="@{/css/fontawesome.css}">
    <link rel="stylesheet" th:href="@{/css/material.css}">

    <!-- vendor css -->
    <link rel="stylesheet" th:href="@{/css/style.css}" id="main-style-link">
    <script th:src="@{/AjaxFileUpload/ajaxfileupload.js}"></script>
    <script th:src="@{/jq/jquery_2_1.min.js}"></script>
</head>
<body class="">
<!-- [ Pre-loader ] start -->
<div class="loader-bg">
    <div class="loader-track">
        <div class="loader-fill"></div>
    </div>
</div>
<!-- [ Pre-loader ] End -->
<!-- [ Mobile header ] start -->
<div class="pc-mob-header pc-header">
    <div class="pcm-logo">
        <img src="../static/picture/logo.svg" alt="" class="logo logo-lg">
    </div>
    <div class="pcm-toolbar">
        <a href="#!" class="pc-head-link" id="mobile-collapse">
            <div class="hamburger hamburger--arrowturn">
                <div class="hamburger-box">
                    <div class="hamburger-inner"></div>
                </div>
            </div>
        </a>
        <a href="#!" class="pc-head-link" id="headerdrp-collapse">
            <i data-feather="align-right"></i>
        </a>
        <a href="#!" class="pc-head-link" id="header-collapse">
            <i data-feather="more-vertical"></i>
        </a>
    </div>
</div>
<!-- [ Mobile header ] End -->

<!-- [ navigation menu ] start -->
<nav class="pc-sidebar ">
    <div class="navbar-wrapper">
        <div class="m-header">
            <a href="index.html" class="b-brand">
                <!-- ========   change your logo hear   ============ -->
                <img src="../static/picture/logo.svg" alt="" class="logo logo-lg">
                <img src="../static/picture/logo-sm.svg" alt="" class="logo logo-sm">
            </a>
        </div>
        <div class="navbar-content">
            <ul class="pc-navbar">
                <li class="pc-item pc-caption">
                    <label>Navigation</label>
                </li>
                <li class="pc-item">
                    <a th:href="@{/main}" class="pc-link "><span class="pc-micon"><i class="material-icons-two-tone">home</i></span><span class="pc-mtext">学生列表</span></a>
                </li>
                <li class="pc-item">
                    <a class="pc-link "><span class="pc-micon"><i class="material-icons-two-tone">business_center</i></span><span class="pc-mtext">添加/批量导入学生</span></a>
                </li>
                <li class="pc-item pc-caption">
                    <label>Maps</label>
                    <span>Tones of readymade charts</span>
                </li>
                <li class="pc-item">
                    <a href="maps.html" class="pc-link "><span class="pc-micon"><i class="material-icons-two-tone">my_location</i></span><span class="pc-mtext">常聚区域</span></a>
                </li>

            </ul>
        </div>
    </div>
</nav>
<!-- [ navigation menu ] end -->
<!-- [ Header ] start -->
<header class="pc-header ">
    <div class="header-wrapper">
        <div class="me-auto pc-mob-drp">
            <ul class="list-unstyled">
                <li class="dropdown pc-h-item">
                    <div class="dropdown-menu pc-h-dropdown">
                        <a href="#!" class="dropdown-item">
                            <i class="material-icons-two-tone">account_circle</i>
                            <span>My Account</span>
                        </a>
                        <div class="pc-level-menu">
                            <a href="#!" class="dropdown-item">
                                <i class="material-icons-two-tone">list_alt</i>
                                <span class="float-end"><i data-feather="chevron-right" class="me-0"></i></span>
                                <span>Level2.1</span>
                            </a>
                            <div class="dropdown-menu pc-h-dropdown">
                                <a href="#!" class="dropdown-item">
                                    <i class="fas fa-circle"></i>
                                    <span>My Account</span>
                                </a>
                                <a href="#!" class="dropdown-item">
                                    <i class="fas fa-circle"></i>
                                    <span>Settings</span>
                                </a>
                                <a href="#!" class="dropdown-item">
                                    <i class="fas fa-circle"></i>
                                    <span>Support</span>
                                </a>
                                <a href="#!" class="dropdown-item">
                                    <i class="fas fa-circle"></i>
                                    <span>Lock Screen</span>
                                </a>
                                <a href="#!" class="dropdown-item">
                                    <i class="fas fa-circle"></i>
                                    <span>Logout</span>
                                </a>
                            </div>
                        </div>
                        <a href="#!" class="dropdown-item">
                            <i class="material-icons-two-tone">settings</i>
                            <span>Settings</span>
                        </a>
                        <a href="#!" class="dropdown-item">
                            <i class="material-icons-two-tone">support</i>
                            <span>Support</span>
                        </a>
                        <a href="#!" class="dropdown-item">
                            <i class="material-icons-two-tone">https</i>
                            <span>Lock Screen</span>
                        </a>
                        <a href="#!" class="dropdown-item">
                            <i class="material-icons-two-tone">chrome_reader_mode</i>
                            <span>Logout</span>
                        </a>
                    </div>
                </li>
            </ul>
        </div>
    </div>
</header>
<!-- [ Header ] end -->
<!-- [ Main Content ] start -->
<section class="pc-container">
    <div class="pcoded-content">
        <!-- [ breadcrumb ] start -->

        <!-- [ breadcrumb ] end -->
        <!-- [ Main Content ] start -->
        <div class="row">

            <div class="col-xl-12">
                <div class="card">
                    <div class="card-header">
                        <h5>添加学生</h5>
                    </div>
                    <div class="card-body table-border-style">
                        <div class="table-responsive">
                            <table class="table table-striped">
                                <thead>
                                <tr>
                                    <th>学号</th>
                                    <th>姓名</th>
                                    <th>班级</th>
                                    <th>电话</th>
                                    <th>添加</th>
                                </tr>
                                </thead>
                                <tbody>
                                <tr>
                                    <td><input type="text" id="number" class="form-control mb-4" placeholder="请输入学号"></td>
                                    <td><input type="text" id="name" class="form-control mb-4" placeholder="请输入姓名"></td>
                                    <td><input type="text" id="classname" class="form-control mb-4" placeholder="请输入班级"></td>
                                    <td><input type="text" id="phone" class="form-control mb-4" placeholder="请输入电话"></td>
                                    <td><button class="btn btn-block btn-primary mb-4" type="button" onclick="add()">添加</button></td>
                                </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-6">
                <div class="card">
                    <div class="card-header">
                        <h5>添加成功</h5>
                        <span class="d-block m-t-5">查看添加成功的学生</span>
                    </div>
                    <div class="card-body table-border-style">
                        <div class="table-responsive">
                            <table class="table table-hover">
                                <thead>
                                <tr>
                                    <th>学号</th>
                                    <th>姓名</th>
                                    <th>班级</th>
                                    <th>电话</th>
                                </tr>
                                </thead>
                                <tbody  id="students">

                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-6">
                <div class="card">
                    <div class="card-header">
                        <h5>其他功能</h5>
                    </div>
                    <div class="card-body table-border-style">
                        <div class="table-responsive">
                            <table class="table table-hover">
                                <thead>
                                <tr>
                                    <th>#</th>
                                    <th>批量导入学生</th>
                                </tr>
                                </thead>
                                <tbody>
                                <tr>
                                    <td>1</td>
                                    <td><input type="file" id="file" onchange ="uploadFile(this)" name="file" class="btn btn-block btn-primary mb-4"></input></td>
                                </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- [ Main Content ] end -->
    </div>
</section>
<!-- [ Main Content ] end -->
<!-- Warning Section start -->
<!-- Older IE warning message -->
<!--[if lt IE 11]>
<div class="ie-warning">
    <p>You are using an outdated version of Internet Explorer, please upgrade
        <br/>to any of the following web browsers to access this website.
    </p>
    <div class="iew-container">
        <ul class="iew-download">
            <li>
                <a href="http://www.google.com/chrome/">
                    <img src="assets/images/browser/chrome.png" alt="Chrome">
                    <div>Chrome</div>
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="assets/images/browser/firefox.png" alt="Firefox">
                    <div>Firefox</div>
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="assets/images/browser/opera.png" alt="Opera">
                    <div>Opera</div>
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="assets/images/browser/safari.png" alt="Safari">
                    <div>Safari</div>
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="assets/images/browser/ie.png" alt="">
                    <div>IE (11 & above)</div>
                </a>
            </li>
        </ul>
    </div>
    <p>Sorry for the inconvenience!</p>
</div>
<![endif]-->
<!-- Warning Section Ends -->
<!-- Required Js -->
<script th:src="@{/js/vendor-all.js}"></script>
<script th:src="@{/js/bootstrap.min.js}"></script>
<script th:src="@{/js/pcoded.js}"></script>
<script th:src="@{/js/feather.min.js}"></script>


</body>
<script>
    var xhttp = new XMLHttpRequest();
    function add() {
        const iptNumber = document.getElementById('number');
        const iptName = document.getElementById('name');
        const iptClassname = document.getElementById('classname');
        const iptPhone = document.getElementById('phone');
        xhttp.onreadystatechange = function(){
            if(this.readyState == 4 && this.status == 200){
                const obj = JSON.parse(this.responseText);
                if(obj.success){
                    alert('添加成功！');
                    const tblBody = document.getElementById('students');
                    const tr = document.createElement('tr');
                    const td = document.createElement('td');
                    td.innerText = iptNumber.value;
                    const td2 = document.createElement('td');
                    td2.innerText = iptName.value;
                    const td3 = document.createElement('td');
                    td3.innerText = iptClassname.value;
                    const td4 = document.createElement('td');
                    td4.innerText = iptPhone.value;

                    tr.appendChild(td);
                    tr.appendChild(td2);
                    tr.appendChild(td3);
                    tr.appendChild(td4);
                    tblBody.appendChild(tr);
                }else{
                    alert('添加失败！'+obj.data);
                }
            }
        }
        xhttp.open("POST","/addStudent?number="+ iptNumber.value + "&name=" + iptName.value + '&classname=' + iptClassname.value + '&phone=' + iptPhone.value,true);
        xhttp.setRequestHeader('Accept','application/json');
        xhttp.send()
    }

    function uploadFile(file){
        $.ajaxFileUpload({
            url : '/upload_excel', //用于文件上传的服务器端请求地址
            secureuri : false, //一般设置为false
            fileElementId : 'file', //文件上传空间的id属性  <input type="file" id="file" name="file" />
            type : 'post',
            dataType : 'text', //返回值类型 一般设置为
            success : function(result) //服务器成功响应处理函数
            {
                var result = $.parseJSON(result.replace(/<.*?>/ig,""));
                if(result.success==true){
                    for(let student of result.list){
                        const tblBody = document.getElementById('students');
                        const tr = document.createElement('tr');
                        const td = document.createElement('td');
                        td.innerText = student.number;
                        const td2 = document.createElement('td');
                        td2.innerText = student.name;
                        const td3 = document.createElement('td');
                        td3.innerText = student.classname;
                        const td4 = document.createElement('td');
                        td4.innerText = student.phone;

                        tr.appendChild(td);
                        tr.appendChild(td2);
                        tr.appendChild(td3);
                        tr.appendChild(td4);
                        tblBody.appendChild(tr);
                    }

                }else{
                    alert('添加失败！'+obj.data);
                }
                alert(result.msg);

            },
            error : function(result)//服务器响应失败处理函数
            {
            }
        });
        return false;
    }



    // JavaScript Document
    jQuery.extend({

        createUploadIframe: function(id, uri)
        {
            //create frame
            var frameId = 'jUploadFrame' + id;

            if(window.ActiveXObject) {
                var io = document.createElement('<iframe id="' + frameId + '" name="' + frameId + '" />');
                if(typeof uri== 'boolean'){
                    io.src = 'javascript:false';
                }
                else if(typeof uri== 'string'){
                    io.src = uri;
                }
            }
            else {
                var io = document.createElement('iframe');
                io.id = frameId;
                io.name = frameId;
            }
            io.style.position = 'absolute';
            io.style.top = '-1000px';
            io.style.left = '-1000px';

            document.body.appendChild(io);

            return io;
        },
        createUploadForm: function(id, fileElementId)
        {
            //create form
            var formId = 'jUploadForm' + id;
            var fileId = 'jUploadFile' + id;
            var form = jQuery('<form  action="" method="POST" name="' + formId + '" id="' + formId + '" enctype="multipart/form-data"></form>');


            /*var oldElement = jQuery('#' + fileElementId);
            var newElement = jQuery(oldElement).clone();
            jQuery(oldElement).attr('id', fileId);
            jQuery(oldElement).before(newElement);
            jQuery(oldElement).appendTo(form);*/

            var oldElement = jQuery('#' + fileElementId);
            var newElement = oldElement.clone(true);
            newElement[0].files=oldElement[0].files;
            oldElement.attr('id', fileId);
            oldElement.before(newElement);
            oldElement.appendTo(form);


            //set attributes
            jQuery(form).css('position', 'absolute');
            jQuery(form).css('top', '-1200px');
            jQuery(form).css('left', '-1200px');
            jQuery(form).appendTo('body');
            return form;
        },

        ajaxFileUpload: function(s) {
            // TODO introduce global settings, allowing the client to modify them for all requests, not only timeout
            s = jQuery.extend({}, jQuery.ajaxSettings, s);
            var id = s.fileElementId;
            var form = jQuery.createUploadForm(id, s.fileElementId);
            var io = jQuery.createUploadIframe(id, s.secureuri);
            var frameId = 'jUploadFrame' + id;
            var formId = 'jUploadForm' + id;

            if( s.global && ! jQuery.active++ )
            {
                // Watch for a new set of requests
                jQuery.event.trigger( "ajaxStart" );
            }
            var requestDone = false;
            // Create the request object
            var xml = {};
            if( s.global )
            {
                jQuery.event.trigger("ajaxSend", [xml, s]);
            }

            var uploadCallback = function(isTimeout)
            {
                // Wait for a response to come back
                var io = document.getElementById(frameId);
                try
                {
                    if(io.contentWindow)
                    {
                        xml.responseText = io.contentWindow.document.body?io.contentWindow.document.body.innerHTML:null;
                        xml.responseXML = io.contentWindow.document.XMLDocument?io.contentWindow.document.XMLDocument:io.contentWindow.document;

                    }else if(io.contentDocument)
                    {
                        xml.responseText = io.contentDocument.document.body?io.contentDocument.document.body.innerHTML:null;
                        xml.responseXML = io.contentDocument.document.XMLDocument?io.contentDocument.document.XMLDocument:io.contentDocument.document;
                    }
                }catch(e)
                {
                    jQuery.handleError(s, xml, null, e);
                }
                if( xml || isTimeout == "timeout")
                {
                    requestDone = true;
                    var status;
                    try {
                        status = isTimeout != "timeout" ? "success" : "error";
                        // Make sure that the request was successful or notmodified
                        if( status != "error" )
                        {
                            // process the data (runs the xml through httpData regardless of callback)
                            var data = jQuery.uploadHttpData( xml, s.dataType );
                            if( s.success )
                            {
                                // ifa local callback was specified, fire it and pass it the data
                                s.success( data, status );
                            };
                            if( s.global )
                            {
                                // Fire the global callback
                                jQuery.event.trigger( "ajaxSuccess", [xml, s] );
                            };
                        } else
                        {
                            jQuery.handleError(s, xml, status);
                        }

                    } catch(e)
                    {
                        status = "error";
                        jQuery.handleError(s, xml, status, e);
                    };
                    if( s.global )
                    {
                        // The request was completed
                        jQuery.event.trigger( "ajaxComplete", [xml, s] );
                    };


                    // Handle the global AJAX counter
                    if(s.global && ! --jQuery.active)
                    {
                        jQuery.event.trigger("ajaxStop");
                    };
                    if(s.complete)
                    {
                        s.complete(xml, status);
                    } ;

                    jQuery(io).unbind();

                    setTimeout(function()
                    { try
                    {
                        jQuery(io).remove();
                        jQuery(form).remove();

                    } catch(e)
                    {
                        jQuery.handleError(s, xml, null, e);
                    }

                    }, 100);

                    xml = null;

                };
            }
            // Timeout checker
            if( s.timeout > 0 )
            {
                setTimeout(function(){

                    if( !requestDone )
                    {
                        // Check to see ifthe request is still happening
                        uploadCallback( "timeout" );
                    }

                }, s.timeout);
            }
            try
            {
                var form = jQuery('#' + formId);
                jQuery(form).attr('action', s.url);
                jQuery(form).attr('method', 'POST');
                jQuery(form).attr('target', frameId);
                if(form.encoding)
                {
                    form.encoding = 'multipart/form-data';
                }
                else
                {
                    form.enctype = 'multipart/form-data';
                }
                jQuery(form).submit();

            } catch(e)
            {
                jQuery.handleError(s, xml, null, e);
            }
            if(window.attachEvent){
                document.getElementById(frameId).attachEvent('onload', uploadCallback);
            }
            else{
                document.getElementById(frameId).addEventListener('load', uploadCallback, false);
            }
            return {abort: function () {}};

        },

        uploadHttpData: function( r, type ) {
            var data = !type;
            data = type == "xml" || data ? r.responseXML : r.responseText;
            // ifthe type is "script", eval it in global context
            if( type == "script" )
            {
                jQuery.globalEval( data );
            }

            // Get the JavaScript object, ifJSON is used.
            if( type == "json" )
            {
                eval( "data = " + data );
            }

            // evaluate scripts within html
            if( type == "html" )
            {
                jQuery("<div>").html(data).evalScripts();
            }

            return data;
        }
    });

</script>
</html>
